import EventEmitter from 'events'
import '@/assets/mapbox/mapbox-gl-compare.css';


export default class Comparable {

  constructor(a, b, options) {
    this.a = a;
    this.b = b;
   
    this.options = options ? options : {};
    this._onDown = this._onDown.bind(this);
    this._onMove = this._onMove.bind(this);
    this._onMouseUp = this._onMouseUp.bind(this);
    this._onTouchEnd = this._onTouchEnd.bind(this);
    this.s = this.s.bind(this);
    this.r = this.r.bind(this);
    this.c = this.c.bind(this);
    this.d = this.d.bind(this)
  
    this._ev = new EventEmitter.EventEmitter();
    this._swiper;
    this._container;
    this._clippedMap;
    // this.a.on('resize', function () {
    //   this._bounds = this.a.getContainer().getBoundingClientRect();
    //   if (this.currentPosition) this._setPosition(this.currentPosition);
    // }.bind(this));

    if (this.options && this.options.mousemove) {
      this.a.getContainer().addEventListener('mousemove', this._onMove);
      this.b.getContainer().addEventListener('mousemove', this._onMove);
    }
    this.setNormalMode();
  }

  /**
   * 卷帘
   */
  setSwipeMode() {
    this.a.getContainer().classList.remove('compare-left-map');
    this.b.getContainer().classList.remove('compare-right-map');
    this.a.getContainer().classList.remove('left-normal');
    this.b.getContainer().classList.remove('right-normal');
    this.a.getContainer().classList.add('compare-normal');
    this.b.getContainer().classList.add('compare-normal');
    if (!this._container) {
      this._swiper = document.createElement('div');
      this._swiper.className = 'compare-swiper';
      this._container = document.createElement('div');
      this._container.className = 'mapboxgl-compare';
      this._container.appendChild(this._swiper);
      this.a.getContainer().appendChild(this._container);
    }

    this._clippedMap = this.b;
    this._bounds = this.b.getContainer().getBoundingClientRect();
    this._setPosition(this._bounds.width / 2);
    this._swiper.addEventListener('mousedown', this._onDown);
    this._swiper.addEventListener('touchstart', this._onDown);
    this.n()

    this.e();
  }
  
  //设置d
  setDrawControl(leftDr,rightDr){
    this.leftDr = leftDr;
    this.rightDr = rightDr;
    
  }

  /**
   * 双屏
   */
  setDoubleMode() {
    this.a.getContainer().classList.remove('left-normal');
    this.b.getContainer().classList.remove('right-normal');
    this.a.getContainer().classList.remove('compare-normal');
    this.b.getContainer().classList.remove('compare-normal');
    this.a.getContainer().classList.add('compare-left-map');
    this.b.getContainer().classList.add('compare-right-map');
    if (this._container) {
      this._setPosition(0);
      this.a.getContainer().removeChild(this._container);
      this._container = undefined;
    }
    this.n()
  }

  /**
   * 单屏
   */
  setNormalMode() {
    this.a.getContainer().classList.add('left-normal');
    this.b.getContainer().classList.add('right-normal');
    this.a.getContainer().classList.remove('compare-normal');
    this.b.getContainer().classList.remove('compare-normal');
    this.a.getContainer().classList.remove('compare-left-map');
    this.b.getContainer().classList.remove('compare-right-map');

    if (this._container) {
      this._setPosition(0);
      this.a.getContainer().removeChild(this._container);
      this._container = undefined;
    }
    this.i();
  }


  /**
   *
   * @param mode
   */
  setMode(mode) {
    const bbox = this.b.getBounds();
    switch (mode) {
      case 0:
        this.setSwipeMode();
        break;
      case 1:
        this.setDoubleMode();
        break;
      case 2:
        this.setNormalMode();
        break;
    }

     this.a.resize();
     this.b.resize();

    this.a.fitBounds(bbox);
  }


  o(a, b) {
    a.jumpTo({center: b.getCenter(), zoom: b.getZoom(), bearing: b.getBearing(), pitch: b.getPitch()});
    a.getCanvas().style.cursor = b.getCanvas().style.cursor;

  }

  n() {
    this.a.on("move", this.s), this.b.on("move", this.r)
  }

  i() {
    this.a.off("move", this.s), this.b.off("move", this.r)
  }

  s() {
    this.i();
    this.o(this.b, this.a);
    this.n()
  }

  r() {
    this.i();
    this.o(this.a, this.b);
    this.n()
  }

  o1(a,b) {
    if(a && b){
      a.set(b.getAll());
      a.changeMode(b.getMode(),{featureIds:b.getSelectedIds()})
    }
    
  }

  e(){
    this.a.on("draw.create", this.c), this.b.on("draw.create", this.d)
    this.a.on("draw.update", this.c), this.b.on("draw.update", this.d)
    this.a.on("draw.delete", this.c), this.b.on("draw.delete", this.d)
    this.a.on("draw.modechange", this.c), this.b.on("draw.modechange", this.d)
    this.a.on("draw.selectionchange", this.c), this.b.on("draw.selectionchange", this.d)
  
  }

  f(){
    this.a.off("draw.create", this.c), this.b.off("draw.create", this.d)
    this.a.off("draw.update", this.c), this.b.off("draw.update", this.d)
    this.a.off("draw.delete", this.c), this.b.off("draw.delete", this.d)
    this.a.off("draw.modechange", this.c), this.b.off("draw.modechange", this.d)
    this.a.off("draw.selectionchange", this.c), this.b.off("draw.selectionchange", this.d)
  }

  c(){
     this.f();
     this.o1(this.rightDr,this.leftDr) ; 
     this.e();
  }

  d(){
    this.f();
    this.o1(this.leftDr,this.rightDr) ;
    this.e();
  }



  _setPointerEvents(v) {
    this._container.style.pointerEvents = v;
    this._swiper.style.pointerEvents = v;
  }

  _onDown(e) {
    if (e.touches) {
      document.addEventListener('touchmove', this._onMove);
      document.addEventListener('touchend', this._onTouchEnd);
    } else {
      document.addEventListener('mousemove', this._onMove);
      document.addEventListener('mouseup', this._onMouseUp);
    }
  }

  _setPosition(x) {
    x = Math.min(x, this._bounds.width);
    var pos = 'translate(' + x + 'px, 0)';
    this._container.style.transform = pos;
    this._container.style.WebkitTransform = pos;
    this._clippedMap.getContainer().style.clip =
      'rect(0, 999em, ' + this._bounds.height + 'px,' + x + 'px)';
    this.currentPosition = x;
  }

  _onMove(e) {
    if (this.options && this.options.mousemove) {
      this._setPointerEvents(e.touches ? 'auto' : 'none');
    }
    this._setPosition(this._getX(e));
  }

  _onMouseUp() {
    document.removeEventListener('mousemove', this._onMove);
    document.removeEventListener('mouseup', this._onMouseUp);
    this.fire('slideend', {currentPosition: this.currentPosition});
  }

  _onTouchEnd() {
    document.removeEventListener('touchmove', this._onMove);
    document.removeEventListener('touchend', this._onTouchEnd);
  }

  _getX(e) {
    e = e.touches ? e.touches[0] : e;
    var x = e.clientX - this._bounds.left;
    if (x < 0) x = 0;
    if (x > this._bounds.width) x = this._bounds.width;
    return x;
  }

  setSlider(x) {
    this._setPosition(x);
  }

  on(type, fn) {
    this._ev.on(type, fn);
    return this;
  }

  fire(type, data) {
    this._ev.emit(type, data);
    return this;
  }

  off(type, fn) {
    this._ev.removeListener(type, fn);
    return this;
  }

  getMap() {
    return this.b;
  }


}
